<template>
  <view class="equipment-details">
    <template v-if="details">
      <view class="box">
        <view class="title">
          <view style="overflow-y: auto; white-space: nowrap"
            >设备序列号：{{ details.host_serial_no }}</view
          >
        </view>
        <view class="wrapper">
          <view class="row">
            <text class="label">上次巡检时间：</text>
            <text :class="['value', false && 'exception']">{{
              details.create_at
            }}</text>
          </view>
          <view class="row">
            <text class="label">环境温度：</text>
            <text
              :class="[
                'value',
                details.ambient_temperature != 0 && 'exception'
              ]"
              >{{
                ['正常', '温度过低', '温度过高'][details.ambient_temperature]
              }}</text
            >
          </view>
          <view class="row">
            <text class="label">主机状态：</text>
            <text :class="['value', details.host != 0 && 'exception']">{{
              ['正常', '异常'][details.host]
            }}</text>
          </view>
          <view class="row">
            <text class="label">电池状态：</text>
            <text :class="['value', details.battery != 0 && 'exception']">{{
              ['正常', '即将过期', '已过期'][details.battery]
            }}</text>
          </view>
          <view class="row">
            <text class="label">电极片插入状态：</text>
            <text
              :class="['value', details.ele_insertion_status != 0 && 'exception']"
              >{{ ['正常', '未插入'][details.ele_insertion_status] }}</text
            >
          </view>
		  <view class="row">
		    <text class="label">电极片期限：</text>
		    <text
		      :class="['value', details.ele_electrode_period != 0 && 'exception']"
		      >{{ ['正常', '即将过期', '已过期'][details.ele_electrode_period] }}</text
		    >
		  </view>
          <view class="form-textarea">
            <view class="remark">{{ details.device_content }}</view>
            <view class="grid-box">
              <view
                v-for="img in details.device_imgs.split('|')"
                :key="img"
                class="grid-item"
              >
                <image
                  class="cover-image"
                  :src="img"
                  mode="aspectFill"
                  @click="previewImage(img)"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="box" v-if="details.cha_serial_no">
        <view class="title">
          <view style="overflow-y: auto; white-space: nowrap"
            >机箱序列号：{{ details.cha_serial_no }}</view
          >
        </view>
        <view class="wrapper">
          <view class="row">
            <text class="label">设备是否在位：</text>
            <text :class="['value', details.is_reign != 0 && 'exception']">{{
              ['在位', '不在位'][details.is_reign]
            }}</text>
          </view>
          <view class="row">
            <text class="label">开关门状态：</text>
            <text
              :class="['value', details.switch_status != 0 && 'exception']"
              >{{ ['关门', '开门'][details.switch_status] }}</text
            >
          </view>
          <view class="form-textarea">
            <view class="remark">{{ details.cha_content }}</view>
            <view class="grid-box">
              <view
                v-for="img in details.cha_imgs.split('|')"
                :key="img"
                class="grid-item"
              >
                <image
                  class="cover-image"
                  :src="img"
                  mode="aspectFill"
                  @click="previewImage(img)"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <button class="btn-primary btn-restart" @click="handleRecheck">
      再次巡检
    </button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { fetchDevicePatrolDetails } from '@/api'
import { useUserStore } from '@/store/user'
import { previewImage } from '@/utils'

const userStore = useUserStore()
const details = ref(null)
const serialNumber = ref('')

onLoad(e => {
  serialNumber.value = e?.serialNum
  
})
onShow(()=>{
	fetchDevicePatrolDetails(userStore.userInfo.id, serialNumber.value).then(
	  res => (details.value = res)
	)
})
function handleRecheck() {
  uni.navigateTo({
    url: '../patrolInspection/index?serialNum=' + serialNumber.value
  })
}
</script>

<style scoped lang="scss">
.equipment-details {
  display: flow-root;
  .box {
    margin: 30rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
    .title {
      height: 92rpx;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 34rpx;
      font-weight: bold;
      padding-left: 30rpx;
      padding-right: 30rpx;
      position: relative;
      ::-webkit-scrollbar {
        display: none;
      }
      &::before {
        content: '';
        position: absolute;
        left: 0;
        width: 10rpx;
        height: 32rpx;
        border-radius: 4rpx;
        background-color: #4771f6;
      }
    }
    .wrapper {
      padding: 0 30rpx 20rpx;
      .row {
        height: 50rpx;
        font-size: 26rpx;
        .label {
          color: #999;
        }
        .value {
          color: #55ba63;
          &.exception {
            color: #cf4a42;
          }
        }
      }
      .form-textarea {
        padding: 20rpx;
        border-radius: 8rpx;
        box-sizing: border-box;
        background-color: #f8f8f8;
        .remark {
          color: #333;
          font-size: 28rpx;
        }
        .grid-box {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20rpx;
          .grid-item {
            height: 132rpx;
            border-radius: 10rpx;
            overflow: hidden;
            .cover-image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .btn-restart {
    margin: 60rpx 30rpx;
  }
}
</style>
<style>
page {
  background-color: #f8f8f8;
}
</style>
